<template>
  <div>
    <p id="box">我是普通p</p>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
/*
.vue文件中的template里写的标签, 都是模板
template => 虚拟DOM => 真实DOM
一. 什么是虚拟DOM
虚拟DOM实际上就是一个js的对象, 只包含必要的属性, 因为真实的DOM属性好几百个, 没办法快速的知道哪个属性改变了
const dom = {
    type: 'p',
    attributes: [{id: 'box'}],
    children: "我是普通p"
}
而且会根据template里的嵌套关系, 形成虚拟DOM树

二. vue数据更新后
1. 生成新的虚拟DOM结构
2. 和旧的虚拟DOM结构比较
3. 只更新变化的部分(回流/重绘)到页面上

好处:
(1): 更新DOM的性能更高
(2): 虚拟DOM只包含必要的属性, 而且在内存中, 更快
 */
export default {
  data(){
    return {
      msg: "我是一个msg消息"
    }
  }
}
</script>

<style>

</style>